<template>
	<el-card shadow="never" style="padding-bottom: 0px !important;margin-bottom: 0px !important;height: 100% !important;
				padding-bottom: 0px;border-width: 0px !important;
				">
		<el-header style="height: 35px;margin-top: -18px;margin-left: -10px;width: 100%;padding-right: 0px;">
			<div class="left-panel" @click="showTest">
				<img class="topblockimg" src="img/icon-bi.png" />
				<span class="topblock">资产分类统计</span>
			</div>
			<div class="right-panel">
				<div style="width: 80px;" class="syselect,no-Clear">
					<el-select @change="loadData" size="default" style="width:100%;" v-model="zczztjxl" >
						<el-option v-for="item in searchForm" :key="item.value" :label="item.label" :value="item.value"/>
					</el-select>
				</div>
			</div>
		</el-header>
		<scEcharts :height="height" :option="option"  @clicks="chartsClick"></scEcharts>
	</el-card>
</template>

<script>
	import scEcharts from '@/components/scEcharts';
	import ExSelect from "@/components/exSelect/index.vue";
	import tool from "@/utils/tool";
	import globalparam from "@/constant/model/globalparam";

	/**
	 * 引入组件 @/components/scEcharts
	 * 组件内部会自动加载主题 @/components/scEcharts/echarts-theme-T.js
	 * 支持props包括 height，width，option
	 * 组件export百度Echarts所有方法，使用方式: new scEcharts[fun]
	 */

	export default {
		name: 'chart',
		components: {
			scEcharts
		},
		props: {
			height: { type: String, default: "160px" },
		},
		data() {
			return {
				option: {
					title: {
						text: '',
					},
					grid: {
						top: '80px'
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: ['数量', '原值', '净值']
					},
					xAxis: {
						type: 'category',
						data: [],
					},
					yAxis: {
						type: 'value'
					},
					series: []
				},
				searchForm:[],
				manageDeptIds:tool.current.manageDeptIds(),
				manageAssetCategoryIds:tool.current.manageAssetCategoryIds(),
				zczztjxl: '',
				assetcategoryMap: {},
				assetcategoryNames : [],
				pathCodes: [],
				assetCategoryIds: [],
				assetStatisticsRange: '',
			}
		},
		beforeMount() {
			const currentDate = new Date();
			this.zczztjxl = currentDate.getFullYear();
			for(let i = 0 ; i <= 10 ; i++){
				this.searchForm.push({
					label: this.zczztjxl - i,
					value: this.zczztjxl - i
				})
			}
			this.$cache.data.loadGlobalParam(globalparam.assetStatisticsRange.paramCode).then((res) => {
				this.assetStatisticsRange = res;
				this.$cache.data.loadGlobalParam(globalparam.assetCategoryStatisticsType.paramCode).then((res) => {
					this.$API.asset.assetcategory.listData.post({ids:res}).then((rsp) =>{
						if(rsp.code === 2000){
							if(rsp.data){
								rsp.data.forEach((item,index)=>{
									this.assetcategoryMap[item.name] = item.pathCode+','+item.levelCode;
									this.pathCodes.push(item.pathCode+','+item.levelCode);
									this.assetcategoryNames.push(item.name);
									this.assetCategoryIds.push(item.id);
								})
								this.loadData();
							}
						}
					});
				});
			});

		},
		methods: {
			loadData(){
				let barwidth='15px';
				if(window.innerWidth>1600 && window.innerWidth<2500){
					barwidth='20px';
				}else if(window.innerWidth>2500 && window.innerWidth<3500){
					barwidth='25px';
				}
				this.loading = true;
				let queryParams = {};
				queryParams.categoryIds = this.assetCategoryIds;
				queryParams.pathCodes = this.pathCodes;
				queryParams.year = this.zczztjxl+'';
				queryParams.assetCategoryIds = this.manageAssetCategoryIds;
				this.fomateQueryParams(queryParams,this)
				this.$API.asset.assetSummaryStatistics.assetCategoryStatisticsByCharts.post(queryParams).then((rsp =>{
					if(rsp.code === 2000){
						this.option.xAxis.data = this.assetcategoryNames;
						let lengend = this.option.legend.data;
						let seriess = [];
						lengend.forEach((item,index)=>{
							seriess.push({
								data: rsp.data.seriesData[item],
								type: 'bar',
								name:item,
								barWidth: barwidth,
							})
						})
						this.option.series = seriess;
					}
					this.loading = false;
				}));
			},
			fomateQueryParams(queryParams,_this) {
				queryParams.deptIds = _this.manageDeptIds;
				queryParams.assetStatisticsRange = _this.assetStatisticsRange;
			},
			chartsClick(params){
				let pathCode = this.assetcategoryMap[params.name];
				this.$API.asset.assetcategory.listData.post({pathCode:pathCode}).then((rsp) =>{
					if(rsp.code === 2000){
						if(rsp.data){
							let queryParams = {};
							queryParams.boughtDateStart = this.zczztjxl+'0101';
							queryParams.boughtDateEnd = this.zczztjxl+'1231';
							this.fomateQueryParams(queryParams,this);
							let assetCategoryIds = [];
							if(!this.manageAssetCategoryIds){
								rsp.data.forEach((item,index)=>{
									assetCategoryIds.push(item.id);
								})
							}else{
								rsp.data.forEach((item,index)=>{
									if (this.manageAssetCategoryIds.some(objs => objs === item.id)) {
										assetCategoryIds.push(item.id);
									}
								})
							}
							queryParams.assetCategoryIds = assetCategoryIds;
							this.searchAsset(this.zczztjxl+'年'+params.name,queryParams);
						}
					}
				});

				//
			},
			searchAsset(item,queryParams) {
				let title = "首页资产分类统计"+item+"资产分类明细";
				//跳转到搜索台账页面
				let fromRouteId = this.$TOOL.crypto.MD5(this.$route.path);//当前页面的路由地址
				let key = this.$TOOL.crypto.MD5(title);//可以做为key的关键字段或内容
				/**
				 *  1 = 根据管理部门，根据登录账户管理范围，资产的管理部门在账户管理范围内的显示<br>
				 *  2 = 根据使用部门，根据登录账户管理范围，资产的使用部门在账户管理范围内的显示<br>
				 *  3 = 根据管理部门或使用部门，根据登录账户管理范围，资产的使用部门或管理部门在账户管理范围内的显示<br>
				 *  其它 = 根据管理部门，按台账，根据使用部门或管理部门或借用部门在管理范围内的
				 */
					//设置搜索参数
				let routeParams = {
						id: key,
						title: title,
						fixedParams:{
							assetStatisticsRange:queryParams.assetStatisticsRange,
							deptIds:queryParams.deptIds,
							assetCategoryIds:queryParams.assetCategoryIds,
						},//固定搜索参数，打开页面后，用户通过搜索界面的清空按钮无法清除
						searchParams: queryParams
					};
				this.$store.dispatch("addRouteParams", routeParams);
				this.$router.push({
					name: "toAssetList",
					params: {fromRouteId: fromRouteId, key: key}
				});
			},
		}
	}
</script>

<style>
.xia-app-title{
		color: #141e31;
		font-size: 16px;
		font-weight: 700;
		line-height: 32px;
		top:20px;
		margin-left: 10px;
		margin-top: 30px;
	}
	.symain .el-card__body {
		padding-bottom: 0px !important;
	}

	.syselect{
		line-height: 26px;
		height: 26px;
	}
	.syselect div,.syselect input{
		line-height: 26px;
		height: 26px;
	}

	.no-Clear  .el-input__wrapper:hover .el-input__suffix{
		display: none !important;

	}
</style>
